<template>
  <div style="width:100%;height:100%" id="index"></div>
</template>

<script>
export default {
    props: ['getPowerCurveDay'],
    data() {
        return {
            listA: [],
            listB: [],
            listC: [],
            listD: []
        };
    },
    methods: {
        aaa() {
            const that = this
            setTimeout(function () {
                that.listA = that.getPowerCurveDay.coldPowerList
                that.listB = that.getPowerCurveDay.electricityPowerList
                that.listC = that.getPowerCurveDay.generatedOutputList
                that.listD = that.getPowerCurveDay.heatingPowerList
                that.drawLine();
            }, 100)

        },
        drawLine() {
            var myChart = this.$echarts.init(document.getElementById("index"));
            let that = this
            let liA = that.listA
            let liB = that.listB
            let liC = that.listC
            let liD = that.listD

            myChart.setOption({
                tooltip: {
                    trigger: "axis"
                },
                grid: {
                    left: 20,
                    right: 20,
                    bottom: 20,
                    top: 50,
                    containLabel:true
                },
                legend: {
                    x: "right",
                    left: "76%",
                    icon:'circle'
                },
                xAxis: {
                    splitLine: {
                        show: false
                    },
                    type: "category",
                    axisTick: {
                        //y轴刻度线
                        show: false
                    },

                    axisLine: {
                        //y轴
                        show: false
                    },
                    axisLabel: {
                        interval:'auto',
                    },
                    data: ["00:00", "00:15", "00:30", "00:45", "01:00", "01:15", "01:30", "01:45", "02:00", "02:15", "02:30", "02:45", "03:00", "03:15", "03:30", "03:45", "04:00", "04:15", "04:30", "04:45", "05:00", "05:15", "05:30", "05:45", "06:00", "06:15", "06:30", "06:45", "07:00", "07:15", "07:30", "07:45", "08:00", "08:15", "08:30", "08:45", "09:00", "09:15", "09:30", "09:45", "10:00", "10:15", "10:30", "10:45", "11:00", "11:15", "11:30", "11:45", "12:00", "12:15", "12:30", "12:45", "13:00", "13:15", "13:30", "13:45", "14:00", "14:15", "14:30", "14:45", "15:00", "15:15", "15:30", "15:45", "16:00", "16:15", "16:30", "16:45", "17:00", "17:15", "17:30", "17:45", "18:00", "18:15", "18:30", "18:45", "19:00", "19:15", "19:30", "19:45", "20:00", "20:15", "20:30", "20:45", "21:00", "21:15", "21:30", "21:45", "22:00", "22:15", "22:30", "22:45", "23:00", "23:15", "23:30", "23:45", "24:00"]
                },
                yAxis: {
                    name: '单位(kW)',
                    nameTextStyle: {
                        fontWeight: 400,
                        fontSize: 14,
                        color: '#666'
                    },
                    type: 'value',
                    axisTick: {
                        //y轴刻度线
                        show: false
                    },
                    axisLine: {
                        //y轴
                        show: false
                    }
                },
                series: [
                    {
                        name: "用电功率",
                        type: "line",
                        smooth: true,
                        showSymbol:false,
                        data: liA.map(item=>+item),
                        itemStyle: {
                            color: "#91d66e"
                        }
                    },
                    {
                        name: "发电功率",
                        type: "line",
                        smooth: true,
                        showSymbol:false,
                        data: liB.map(item=>+item),
                        itemStyle: {
                            color: "#ff9900"
                        }
                    },
                    {
                        name: "供热功率",
                        type: "line",
                        smooth: true,
                        showSymbol:false,
                        data: liC.map(item=>+item),
                        itemStyle: {
                            color: "#fc7f7d"
                        }
                    },
                    {
                        name: "供冷功率",
                        type: "line",
                        smooth: true,
                        showSymbol:false,
                        stack: "总量",
                        data: liD.map(item=>+item),
                        itemStyle: {
                            color: "#46a3f7"
                        }
                    }
                ]
            });
        }
    },
    mounted() {
        this.drawLine();
    }
};
</script>

<style></style>
